import { Link } from 'react-router-dom';
import { Globe, Zap, Code, Check } from 'lucide-react';
import Button from '../components/Button';
import { useLanguage } from '../contexts/LanguageContext';
import { useLocalizedLink } from '../hooks/useLocalizedLink';

const HomeExample = () => {
  const { t } = useLanguage();
  const { getLink } = useLocalizedLink();

  return (
    <div className="w-full">
      {/* Hero Section */}
      <section className="relative bg-[#0f1c3f] text-white py-20 overflow-hidden">
        {/* Abstract Network Background */}
        <div className="absolute inset-0 opacity-10">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="network" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
                <circle cx="50" cy="50" r="1" fill="#00d4ff" />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#network)" />
          </svg>
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
              {t('home.hero.title')}
            </h1>
            <p className="text-lg md:text-xl text-gray-300 mb-8">
              {t('home.hero.subtitle')}
            </p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
              <Link to={getLink('/register')}>
                <Button size="lg" variant="gradient" className="min-w-[160px]">
                  {t('home.hero.getStarted')}
                </Button>
              </Link>
              <Link to={getLink('/pricing')}>
                <Button variant="outline" size="lg" className="min-w-[160px]">
                  {t('home.hero.viewPricing')}
                </Button>
              </Link>
            </div>
            {/* Live Stats */}
            <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-[#0f1c3f]/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700">
                <div className="text-[#00d4ff] text-3xl font-bold">
                  1,245,789
                </div>
                <div className="text-gray-300 mt-2">{t('home.stats.proxyIPs')}</div>
              </div>
              <div className="bg-[#0f1c3f]/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700">
                <div className="text-[#00d4ff] text-3xl font-bold">50+</div>
                <div className="text-gray-300 mt-2">{t('home.stats.countries')}</div>
              </div>
              <div className="bg-[#0f1c3f]/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700">
                <div className="text-[#00d4ff] text-3xl font-bold">456 TB</div>
                <div className="text-gray-300 mt-2">{t('home.stats.bandwidth')}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-[#0f1c3f] mb-4">
              {t('home.features.title')}
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              {t('home.features.subtitle')}
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-6 bg-gray-50 rounded-xl">
              <div className="w-12 h-12 bg-[#0f1c3f] rounded-lg flex items-center justify-center mb-4">
                <Globe className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] mb-2">
                {t('home.features.global.title')}
              </h3>
              <p className="text-gray-600">
                {t('home.features.global.description')}
              </p>
            </div>
            <div className="p-6 bg-gray-50 rounded-xl">
              <div className="w-12 h-12 bg-[#0f1c3f] rounded-lg flex items-center justify-center mb-4">
                <Zap className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] mb-2">
                {t('home.features.performance.title')}
              </h3>
              <p className="text-gray-600">
                {t('home.features.performance.description')}
              </p>
            </div>
            <div className="p-6 bg-gray-50 rounded-xl">
              <div className="w-12 h-12 bg-[#0f1c3f] rounded-lg flex items-center justify-center mb-4">
                <Code className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] mb-2">
                {t('home.features.easeOfUse.title')}
              </h3>
              <p className="text-gray-600">
                {t('home.features.easeOfUse.description')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-[#0f1c3f] text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            {t('home.cta.title')}
          </h2>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            {t('home.cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
            <Link to={getLink('/register')}>
              <Button size="lg" className="bg-white text-[#0f1c3f] hover:bg-gray-100 shadow-lg hover:shadow-xl min-w-[180px]">
                {t('home.cta.freeTrial')}
              </Button>
            </Link>
            <Link to={getLink('/pricing')}>
              <Button variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-[#0f1c3f] min-w-[180px]">
                {t('home.cta.viewPlans')}
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default HomeExample;
